<template>
	<view>
		<view class="person-container">
			<view class="content">
				<view class="setting">
					<uni-icons class="setting-icon" color="" type="gear" size="24" @click="toSetting()"></uni-icons>
				</view>
				<view class="person-info">
					<view class="person-info-left-box">
						<view class="person-avatar">
							<img id="avatar-img" :src="userDetail.data.userAvatar" alt="" />
						</view>
					</view>
					<view class="person-info-center-box">
						<view class="person-info-center-box-top">
							<view class="person-name">
								{{userDetail.data.nickname}}
							</view>
						</view>
						<view class="person-info-center-box-bottom">
							<view class="following">
								关注：{{userDetail.data.following}}
							</view>
							<view class="followers">
								粉丝：{{userDetail.data.followers}}
							</view>
						</view>
					</view>
					<view class="person-info-right-box">
						<view class="person-main-page">
							<view class="main-page-text">
								个人主页
							</view>
							<view class="main-page-arrow">
								<uni-icons class="arrow-main" color="#999" type="right" size="18"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="show-coming">
					<view class="show-coming-text">
						即将开始
					</view>
					<view class="show-info">
						<view class="show-info-left">
							<view class="show-info-left-item">
								<view class="show-img">
									<img class="show-img-url" :src="showInfo.data.showImgUrl" alt="" />
								</view>
							</view>
							<view class="show-info-left-item">
								<view class="show-name">
									{{showInfo.data.showName}}
								</view>
								<view class="show-time">
									{{showInfo.data.showtime}}
								</view>
							</view>
						</view>
						<view class="show-right-icon">
							<uni-icons class="arrow-right" color="#999" type="right" size="18"></uni-icons>
						</view>
					</view>

				</view>
				<view class="person-order" @click="toOrderList()">
					<view class="order-text">
						我的订单
					</view>
					<view class="order-right-icon">
						<uni-icons class="arrow-right" color="#999" type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="common-tools">
					<view class="common-tools-text">
						常用工具
					</view>
					<view class="common-tools-list">
						<view class="common-tools-item" @click="toSepctator()">
							<view class="common-tools-icon">
								<uni-icons class="tool-icon" color="#333" type="staff-filled" size="24"></uni-icons>
							</view>
							<view class="common-tools-name">
								观演人
							</view>
						</view>
						<view class="common-tools-item" @click="toAddress()">
							<view class="common-tools-icon">
								<uni-icons class="tool-icon" color="#333" type="location-filled" size="24"></uni-icons>
							</view>
							<view class="common-tools-name">
								地址管理
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		watchEffect
	} from 'vue';
	import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
	/**
	 * 跳转订单列表
	 */
	let toOrderList = () => {
		uni.navigateTo({
			url: "/pages/orderlist/orderlist"
		})
	}

	/**
	 * 跳转个人设置
	 */
	let toSetting = () => {
		uni.navigateTo({
			url: "/pages/setting/setting"
		})
	}

	/**
	 * 跳转观演人页面
	 */
	let toSepctator = () => {
		uni.navigateTo({
			url: "/pages/spectator/spectator"
		})
	}

	/**
	 * 跳转地址管理页面
	 */

	let toAddress = () => {
		uni.navigateTo({
			url: "/pages/address/address"
		})
	}
	/**
	 * 用户详情data
	 */
	let userDetail = ref({
		code: 2000,
		msg: "success",
		data: {
			userId: 1,
			pubilcId: "DX89099990",
			nickname: "唱跳rap篮球",
			gender: "男",
			following: 108,
			followers: 10,
			birthDate: "2004/05/03",
			personalBio: "一枚SRE攻城狮",
			userAvatar: "https://gd-hbimg.huaban.com/f745f4d45175d04e4c85f8c9f34409b1dd5eeb5612e43-VRcM5M_fw1200"
		}
	})

	/**
	 * 即将演出data
	 */
	let showInfo = ref({
		code: 2000,
		msg: "success",
		data: {
			userId: 1,
			showDetId: 1,
			showName: "舞台剧东野圭吾【虚无的十字架】",
			showtime: "2020年09月17日 19:00",
			showImgUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/%E5%B0%81%E9%9D%A2_u1151.png"
		}
	})
</script>

<style lang="scss">
	.person-container {
		width: 100%;

		//#ifdef MP-WEIXIN
		min-height: 100vh;
		// #endif
		// #ifndef MP-WEIXIN 
		min-height: calc(100vh - 50px);
		// #endif
		height: auto;
		// background: linear-gradient(#ffffff, #f2f2f2);
		background: #f8f8fe;
		.content {
			width: 100%;
			box-sizing: border-box;
			padding: 0px 25px;
			height: auto;

			.setting {
				height: 60px;
				width: 100%;

				.setting-icon {
					float: right;
					line-height: 60px;
				}
			}

			.person-info {
				height: 72px;
				margin-bottom: 20px;
				display: block;

				.person-info-left-box {
					float: left;
					height: 72px;

					.person-avatar {

						#avatar-img {
							width: 72px;
							height: 72px;
							border-radius: 8px;
							box-shadow: 0px 0px 10px 0px #c4c4c4;
						}
					}
				}

				.person-info-center-box {
					float: left;
					width: calc(100% - 148px);
					height: 72px;
					box-sizing: border-box;
					padding-left: 15px;

					.person-info-center-box-top {
						float: left;
						display: block;
						height: 36px;

						.person-name {
							font-size: 18px;
							font-weight: bold;
							line-height: 36px;
						}
					}

					.person-info-center-box-bottom {
						display: block;
						float: left;
						height: 36px;
						font-size: 12px;
						line-height: 48px;

						.following {
							float: left;
						}

						.followers {

							float: left;
							margin-left: 10px;
						}
					}
				}

				.person-info-right-box {
					width: 76px;
					float: right;
					height: 72px;

					.person-main-page {
						display: flex;
						align-items: center;

						.main-page-text {
							font-size: 12px;
							line-height: 72px;
							margin-right: 10px;
						}

						.main-page-arrow {

							.arrow-main {
								line-height: 72px;
							}
						}
					}
				}
			}

			.show-coming {
				width: 100%;
				height: 130px;
				border-radius: 8px;
				background: #fff;
				box-sizing: border-box;
				padding: 0px 15px;
				float: left;
				box-shadow: 0px 0px 6px 0px #d7d7d7;
				margin-bottom: 20px;

				.show-coming-text {
					width: 100%;
					height: 50px;
					float: left;
					line-height: 50px;
					font-size: 14px;
				}

				.show-info {
					width: 100%;
					height: 80px;
					float: left;

					.show-info-left {
						float: left;

						.show-info-left-item {
							float: left;
							width: auto;
							height: 80px;
							box-sizing: border-box;
							padding: 15px 0px;

							.show-img {
								width: auto;
								height: 50px;

								.show-img-url {
									width: 36px;
									height: 50px;
								}
							}

							.show-name {
								padding-left: 15px;
								height: 25px;
								line-height: 20px;
								font-size: 14px;
							}

							.show-time {
								padding-left: 15px;
								height: 25px;
								line-height: 30px;
								font-size: 12px;
							}
						}
					}

					.show-right-icon {
						width: auto;
						height: 80px;
						float: right;

						.arrow-right {
							line-height: 80px;
						}
					}

				}
			}

			.person-order {
				width: 100%;
				height: 64px;
				border-radius: 8px;
				background: #fff;
				box-sizing: border-box;
				padding: 0px 15px;
				float: left;
				box-shadow: 0px 0px 6px 0px #d7d7d7;
				margin-bottom: 20px;

				.order-text {
					color: #333;
					width: auto;
					float: left;
					height: 64px;
					font-size: 16px;
					line-height: 64px;
				}

				.order-right-icon {
					width: auto;
					height: 64px;
					float: right;

					.arrow-right {
						line-height: 64px;
					}
				}
			}

			.common-tools {
				width: 100%;
				height: 150px;
				border-radius: 8px;
				background: #fff;
				box-sizing: border-box;
				float: left;
				box-shadow: 0px 0px 6px 0px #d7d7d7;

				.common-tools-text {
					width: 100%;
					height: 64px;
					font-size: 16px;
					line-height: 64px;
					float: left;
					border-bottom: 1px solid #ddd;
					padding: 0px 15px;
					box-sizing: border-box;
				}

				.common-tools-list {
					width: 100%;
					height: 64px;
					font-size: 12px;
					float: left;
					box-sizing: border-box;

					.common-tools-item {
						width: 25%;
						float: left;
						height: 87px;

						.common-tools-icon {
							height: 64px;
							width: 100%;
							float: left;
							display: flex;
							justify-content: center;

							.tool-icon {
								line-height: 75px;
								text-align: center;
							}
						}

						.common-tools-name {
							width: 100%;
							height: 23px;
							float: left;
							line-height: 5px;
							text-align: center;
							font-size: 12px;

						}
					}
				}
			}
		}

	}
</style>